<template>
  <div class="moldcontiner">
    <div class="pedal">
      <div class="btn leftkey" tabindex="0" ref="leftBtn">
        <img src="@/assets/images/zuojiao.png" alt="" />
      </div>
      <div class="centerBg">
        <img src="@/assets/images/jiaoduodi.png" alt="" />
      </div>
      <div class="btn rightkey" tabindex="0" ref="rightBtn">
        <img src="@/assets/images/youjiao.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    pedalX: {
      type: String,
      default: () => "1",
    },
  },
  data() {
    return {
      directionPosition: {
        left: "0",
        right: "0",
      },
    };
  },
  watch: {
    pedalX(newVal, oldVal) {
      if (newVal < 0) {
        // console.log("左高:", newVal);
        this.directionPosition.left = parseFloat(newVal) * 90;
        this.directionPosition.right = -parseFloat(newVal) * 50;
        // console.log("左高", parseFloat(newVal), this.directionPosition.right);
      } else if (newVal == 0) {
        this.directionPosition.left = "0";
        this.directionPosition.right = "0";
      } else if (newVal > 0) {
        this.directionPosition.left = parseFloat(newVal) * 50;
        this.directionPosition.right = -parseFloat(newVal) * 90;
        // console.log("右高", parseFloat(newVal), this.directionPosition.left);
      }
      document.documentElement.style.setProperty(
        "--yoke-left",
        `${this.directionPosition.left}%`
      );
      document.documentElement.style.setProperty(
        "--yoke-right",
        `${this.directionPosition.right}%`
      );
    },
  },
};
</script>

<style scoped lang="scss">
.moldcontiner {
  width: 350px;
  height: 200px;
  border-image-source: url("../../../assets/images/gamebg.png");
  border-image-slice: 90 fill; /* 设置图像边框的分割方式 */
  border-image-width: 50px; /* 设置边框宽度 */
  border-image-outset: 10; /* 设置边框扩展区域的大小 */
  border-image-repeat: stretch; /* 设置图像边框的重复方式 */
  display: flex;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  position: relative;
  .pedal {
    width: 250px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    .btn {
      width: 50px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      color: white;
      border: none;
      cursor: pointer;
      transition: transform 0.1s, box-shadow 0.1s;
      font-size: 24px;
      border-radius: 12px;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }

    .leftkey {
      left: 25%;
      transform: translateY(var(--yoke-left));
      transition: transform 0.1s ease-in-out;
    }
    .centerBg {
      width: 120px;
      height: 120px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .rightkey {
      right: 25%;
      transform: translateY(var(--yoke-right));
      transition: transform 0.1s ease-in-out;
    }
  }
}
</style>
